.Main {
    $left-width: 120px;
    $rtop-hight: 48px;
    $rtop2-hight: 30px;
    $left-bgc: #fc5185;
    $left-ulbgc: #222;

    &>.left {
        color: #fff;
        position: fixed;
        top: calc((100% + $rtop-hight + $rtop2-hight ) / 2 - 300px);
        left: 0;
        width: $left-width;
        height: 600px;
        z-index: 1;
        display: flex;
        transition: all .3s;

        &>div {
            width: 20%;
            height: 100%;
            background-color: $left-bgc;
        }

        &>ul {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            width: 80%;
            height: 100%;
            background-color: $left-ulbgc;
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;

            li {
                z-index: 1;
                width: 80%;
                padding: 20px;
                height: 100px;
                display: flex;
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
                align-items: center;
                padding-left: 15px;
            }

            &>.changeli {
                display: none !important;
            }

            .mask {
                position: absolute;
                width: 75%;
                height: 100px;
                border-top-right-radius: 1000px;
                border-bottom-right-radius: 1000px;
                background-color: $left-bgc;
                transition: all .3s;

                :first-child {
                    height: 15%;
                    border-bottom-left-radius: 1000px;
                    background-color: $left-ulbgc;
                }

                :nth-child(2) {
                    height: 70%;
                    width: 110%;
                    background-color: $left-bgc;
                    border-top-right-radius: 18px;
                    border-bottom-right-radius: 18px;
                }

                :last-child {
                    height: 15%;
                    border-top-left-radius: 1000px;
                    background-color: $left-ulbgc;
                }
            }

            &>.changemask {
                width: 0;
                height: 0;
            }
        }
    }

    &>.changeLeft {
        width: 20px;
    }

    &>.right {
        &>.rtop {
            height: $rtop-hight;
            border-bottom: 1px solid #eaeaea;
            width: 100%;
            z-index: 999;
            display: flex;
            justify-content: space-between;
            background-color: #fff;

            &>.rtopLeft {
                display: flex;
                height: 100%;
                margin-left: 20px;

                &>.rtoplImg {
                    margin-right: 20px;
                    width: auto;
                    height: 100%;
                }

                &>.unfoldSvg {
                    cursor: pointer;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    padding: 0 10px;
                    transition: all 0.3s;
                }

                &>.unfoldSvg:hover {
                    background-color: #f2f2f2;
                }

                &>.rtoplWhere {
                    display: flex;
                    align-items: center;
                    color: #838d95;
                }
            }

            &>.rtopright {
                display: flex;
                margin-right: 20px;

                &>div {
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    height: 100%;
                    padding: 0 10px;
                }

                &>div:hover {
                    background-color: #f2f2f2;
                }
            }
        }

        &>.rtop2 {
            height: $rtop2-hight;
            width: 100%;
            box-shadow: inset 2px 2px 10px #ccc;
            background-color: #fff;
            z-index: 999;
            display: flex;
            align-items: center;

            &>.rtop2Tag {
                margin-left: 10px;
                height: 24px;
                padding: 0 10px;
                display: flex;
                align-items: center;
            }
        }

        &>.rcontent {
            white-space: 'pre-wrap';
            width: 100%;
            min-height: calc(100vh - $rtop-hight - $rtop2-hight);
            background-color: #fff;
        }

        @keyframes zoomIn {
            from {
                opacity: 0;
                transform: scale3d(0.1, 0.1, 0.1);
            }

            25% {
                opacity: 1;
            }

            50% {
                opacity: 1;
            }
        }

        .zoomIn {
            animation-duration: 1s;
            animation-fill-mode: both;
            animation-name: zoomIn;
        }
    }
}

@media (height <=700px) {
    .Main>.left {
        transform: scale(0.9);
        left: -6px;
    }
    .Main > .changeLeft {
        left: 0;
    }
}

@media (height <=620px) {
    .Main>.left {
        transform: scale(0.8);
        left: -12px;
    }
    .Main > .changeLeft {
        left: 0;
    }
}

@media (height <=560px) {
    .Main>.left {
        transform: scale(0.7);
        left: -18px;
    }
    .Main > .changeLeft {
        left: 0;
    }
}